<template>
  <view class="service">
    <view
      class="service_item"
      :style="[item._style]"
      v-for="(item, index) of list"
      :key="index"
      @tap="onDetail(item)"
    >
      <image :src="item._picurl" />
      <!-- <view class="icon">
        <image :src="item._picurl" />
      </view> -->
      <!-- <view class="content">
        <view class="content_title" :style="[{ color: item.nameColor }]">
          {{ item.name }}
        </view>
        <view class="content_desc" v-html="item.desc"></view>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import { jumpPage as $jump } from "../../../utils/route/route";
import { useClickSwiperImg } from "../../../hooks/useCommon";
const $emit = defineEmits([""]);
const $props = defineProps({
  list: {
    type: Array,
    default: [],
  },
});
const onDetail = (e) => {
  useClickSwiperImg(e);
};
</script>

<style lang="scss" scoped>
.service {
  &_item {
    width: 100%;
    background: #ffffff;
    border-radius: 15px;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    // padding: 40rpx;
    image {
      width: 100%;
      height: 200rpx;
      border-radius: 20rpx;
    }
    .icon {
      width: 160rpx;
      image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 30rpx;
      }
    }
    .content {
      width: calc(100% - 200rpx);
      margin-left: 20rpx;
      &_title {
        font-size: 38rpx;
        font-weight: 700;
      }
      &_desc {
        font-size: 34rpx;
        line-height: 1.5;
        margin-top: 20rpx;
      }
    }
  }
}
</style>
